<template>
    <el-row>
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="625px" :before-close="handleClose" @close="handleClose()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{title}}</span>
                </div>
                <el-form ref="lineForm" :model="lineForm" class="reset-form">
                    <el-form-item label="管理员类型" :label-width="labelWidth">
                    	<el-select @change="changeType" v-model="lineForm.role" class="text">
                    		<el-option label="劳育服务团队" value="0"></el-option>
                            <el-option label="学校管理员" value="1"></el-option>
                    	</el-select>
                    </el-form-item>

                    <el-form-item v-if="lineForm.role == '1'" label="学校" :label-width="labelWidth">
                    	<el-select @change="changeSchool" v-model="lineForm.schoolId" class="text">
                    		<el-option v-for="(item,index) in schoolList" :key="index" :label="item.label" :value="item.value"></el-option>
                    	</el-select>
                    </el-form-item>

                    <el-form-item label="姓名" :label-width="labelWidth">
                    	<el-input v-model="lineForm.name" autocomplete="off" class="text"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="labelWidth">
                    	<el-input v-model="lineForm.userCode" autocomplete="off" class="text"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="tjgly()">保 存</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
	<!-- <el-dialog title="添加管理员" :visible.sync="tkzt" center class="dia" width="856px" :before-close="closeTk" class="">
		<div class="el-dialog-div">
			<div class="info" >
				<el-form :model="lineForm" ref="lineForm" class="info-form add-course" label-position="top">
					<div>
						<el-form-item label="管理员类型" label-width="80px" class="w360">
							<el-select @change="changeType" v-model="lineForm.role" class="w105">
								<el-option label="劳育服务团队" value="0"></el-option>
                                <el-option label="学校管理员" value="1"></el-option>
							</el-select>
						</el-form-item>

                        <el-form-item v-if="lineForm.role == '1'" label="学校" label-width="80px" class="w360">
                        	<el-select @change="changeSchool" v-model="lineForm.schoolId" class="w105">
                        		<el-option v-for="(item,index) in schoolList" :key="index" :label="item.label" :value="item.value"></el-option>
                        	</el-select>
                        </el-form-item>

                        <el-form-item label="姓名" label-width="80px" class="w360">
                        	<el-input v-model="lineForm.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户名" label-width="80px" class="w360">
                        	<el-input v-model="lineForm.userCode" autocomplete="off"></el-input>
                        </el-form-item>


					</div>
				</el-form>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
            <el-button class="reset-cancel-btn" @click="closeTk()">取 消</el-button>
            <el-button class="reset-comfirm-btn" @click="tjgly()">保 存</el-button>
		</div>
	</el-dialog> -->
</template>

<script>
	export default {
		props: {
            dialogVisible: {
                default: false
            },
            title: {
                default: '提示'
            }
		},
		data() {
			return {
				user: this.$store.state.user,
                schoolList:[],
                searchText:'',
				lineForm: {
                    role:'0',
                    schoolId:'',
                    name:'',
                    userCode:''
				},
                labelWidth:'100px'
			}
		},
        mounted() {
            this.searchSchool();
        },
		methods: {
            handleClose(){
                this.$emit('closeTk');
            },
            changeType(e){
                this.lineForm.role = e;
            },
            searchSchool(searchText){
                this.$api.szhgl.xxlb({'searchText':searchText}).then(res => {
                    if(res.code == '0'){
                        this.schoolList = res.list;
                    }else{
                        this.$message.error('请求失败！');
                    }
                })
            },
            changeSchool(e){
                this.lineForm.schoolId = e;
            },
            tjgly(){
                var parms = {
                    'role':this.lineForm.role,
                    'schoolId':this.lineForm.schoolId,
                    'name':this.lineForm.name,
                    'userCode':this.lineForm.userCode
                };
                this.$api.szhgl.tjgly(parms).then(res => {
                    if(res.code == '0'){
                        this.$emit('updateList')
                        this.$message.success('操作成功！');
                    }else{
                        this.$message.error('操作失败！');
                    }
                    this.handleClose();
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100%;

		.create-btn {
			width: 182px;
			background-color: #4c87ff;
			border-radius: 21px;
		}

		.el-dialog-div {
			display: flex;
			flex-direction: column;
			height: 400px;

			.info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info-form {
					display: flex;
					// width: 403px;
					height: 218px;

					.img-up {
						margin-left: 50px;
						display: grid;
					}
				}

				.upPic {
					width: 304px;
					height: 216px;
					background-color: #f8f9fd;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					border: solid 1px #d6dbe8;
					border-radius: 5px;
				}

				.line-center {
					display: flex;
					flex-direction: column;
					// justify-content: flex-start;
					align-content: space-between;
				}
			}

			.type {
				padding: 0 0 30px 0;
				width: 100%;
				height: 190px;

				.type-item {
					display: flex;
					justify-content: center;

					// align-items: center;
					.type-list {
						margin-right: 20px;
						width: 229px;
						height: 158px;
						background-color: #fefefe;
						border-radius: 5px;
						border: solid 1px #d6dbe8;

						.type-bg {
							text-align: center;
							width: 100%;
							height: 103px;
						}

						.type-info {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.n1 {
								font-size: 18px;
								color: #2e323e;
							}

							.n2 {
								font-size: 12px;
								color: #888fa0;
							}
						}

						// &:hover {
						// 	cursor: pointer;
						// 	border: solid 1px #5b90ff;
						// }

						&.checked {
							border: solid 1px #5b90ff;
						}
					}
				}

			}
		}
	}

	.h-auto {
		height: calc(100% - 80px);
	}

	.slt {
		margin: 15px auto 0;
		width: 300px;
        height: 83px;
		box-sizing: border-box;
        overflow-x: scroll;
        white-space: nowrap;
	}

	.slt .img {
		width: 48px;
		height: 48px;
		margin-right: 10px;
		border: 2px solid #fff;
	}

	.slt .img.checked {
		border: 2px solid #00aeff;
	}


	.up-img-div {
		position: relative;
		width: 300px;
		height: 224px;
	}

	.el-upload {
		position: relative;
	}

	.posa-icon {
		background: rgba(3,3,3,.3);
		border-radius: 2px;
		padding: 0 15px 0 15px;
		cursor: pointer;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.el-upload {
		height: 144px;
	}

	.avatar {
		width: 298px;
		height: 244px;
		display: block;
	}

	.class-list {

		&>>>.el-form-item__content {
			display: flex;
		}
	}

	.add-course>>>.el-dialog {
		height: 100%;
	}
    .psa-img{
        padding-top: 10px;
    }
	.addclassbtn{
		margin: 0 0 5px 235px;
	}
	.delcs{
		margin-left: 10px;
	}
</style>
